<script setup lang="ts">
import { ref, onUnmounted, watch } from "vue";
import { discImageArr } from "@/utils/imgSrcArr";
import { audioStoriesStore } from "@/store";
import { storeToRefs } from "pinia";

const audioStore = audioStoriesStore();
const { showDisc, audioTitle, audioAnchor, audioDuration, isPlay, currentTime } = storeToRefs(audioStore);
const { updateIsPlayOrPauseStore, updateCurrentTimeStore, updateDragProgressStore } = audioStore;

let discTimer = 0;
let discImageIndex = ref<number>(0);
let duration = ref<number>(0);

const showPopup = ref(false);
const sliderVal = ref(0);
const iconImg = ref('');

// 改变全局audioIcon的样式
watch(() => isPlay.value, (newValue) => {
    if (newValue) {
        discAnimation();
        iconImg.value = require('@/assets/audio/player_pause.png');
    }
    else {
        if (discTimer) {
            // 清除副作用计时器
            clearInterval(discTimer);
        }
        discImageIndex.value = discImageArr.length - 1;
        iconImg.value = require('@/assets/audio/player_play.png');
    }
})

// 有声读物播放时，开启唱片元素的切图动画
function discAnimation() {
    discTimer = setInterval(() => {
        discImageIndex.value = (discImageIndex.value + 1) % (discImageArr.length - 1);
    }, 80);
}

// 进度条的变化
watch(() => currentTime.value, (newValue) => {
    duration.value = newValue;
    sliderVal.value = (newValue / audioDuration.value) * 100;
})

// 改变进度条
function onChangeSlider() {
    let time = (sliderVal.value / 100) * audioDuration.value;
    updateDragProgressStore(true);
    updateCurrentTimeStore(time);
}

// 弹出层的显示
function showPlayControlDrawer() {
    showPopup.value = true;
}

// 组件将要销毁之前清空计时器
onUnmounted(() => {
    if (discTimer) {
        // 清除副作用计时器
        clearInterval(discTimer);
    }
})

// 弹出层的暂停与播放
function changeStatus() {
    if (isPlay.value) {
        updateIsPlayOrPauseStore(false);
    }
    else {
        updateIsPlayOrPauseStore(true);
    }
}

// 时间格式
function getAudioStr(dur: number) {
    const m = Math.floor(dur / 60);
    const s = Math.floor(dur % 60);

    let minus = m >= 10 ? m + '' : "0" + m;
    let second = s >= 10 ? s + '' : "0" + s;

    return minus + "' " + second + "''";
}

</script>

<template>
    <div>
        <transition name="disc-icon">
            <div class="disc-icon" @click="showPlayControlDrawer" v-show="showDisc"
                :style="{ backgroundImage: `url(${discImageArr[discImageIndex]})` }"></div>
        </transition>

        <van-popup v-model:show="showPopup" position="top" :style="{ height: '30%' }" class="p-8">
            <div class="text-center text-2xl text-gray-400 ">{{ audioTitle }}</div>

            <div>
                <van-slider v-model="sliderVal" @change="onChangeSlider" active-color="#2d2d2d" class="mt-8">
                    <template #button>
                        <div class="img"></div>
                    </template>
                </van-slider>
                <div class="text-right mt-3 text-gray-300 ">{{ getAudioStr(audioDuration - duration) }}</div>
            </div>

            <div class="text-center text-gray-300 ">{{ audioAnchor }}</div>

            <div class="flex mt-5 justify-center items-center">
                <img class="w-14 h-14" src="@/assets/audio/last.png" alt="img" />
                <img class="w-16 h-16 mx-12" :src="iconImg" alt="img" @click="changeStatus" />
                <img class="w-14 h-14" src="@/assets/audio/next.png" alt="img" />
            </div>

            <div class="flex justify-between mt-5">
                <img class="w-10 h-10" src="@/assets/audio/player_all_cycle.png" alt="img" />
                <div class="flex">
                    <img class="w-10 h-10" src="@/assets/audio/music_collection_disable.png" alt="img" />
                    <img class="w-10 h-10 ml-10" src="@/assets/audio/detail_content.png" alt="img" />
                </div>
            </div>
        </van-popup>
    </div>
</template>

<style>
.img {
    position: relative;
}

.img::after {
    position: absolute;
    left: -10px;
    top: -10px;
    content: '';
    display: block;
    background-image: url('@/assets/audio/seekbar_thumb_movie_icon.png');
    background-size: 20px;
    background-position: center;
    width: 20px;
    height: 20px;
}

.disc-icon {
    position: fixed;
    top: 60px;
    right: 0;
    width: 40px;
    height: 40px;
    z-index: 900;
    background-size: 100% 100%;
}

.disc-icon-enter-from,
.disc-icon-leave-to {
    transform: translateX(100%);
}

.disc-icon-enter-active,
.disc-icon-leave-active {
    transition: all 0.3s linear;
}

.disc-icon-enter-to,
.disc-icon-leave-from {
    transform: translateX(0);
}
</style>